<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录/注册</title>
  <link rel="stylesheet" href="vendor/bootstrap.css">
  <link rel="stylesheet" href="vendor/toastr.css">
  <style>
    body {
      display: flex;
      height: 100vh;
      /* 水平居中 */
      justify-content: center;
      /* 垂直居中 */
      align-items: center;
      background-color: #2b2e3e;
    }

    .login-card {
      width: 800px;
      border: 0;
    }

    .login-card .card-header {
      display: flex;
      align-items: center;
      background-color: #2746b1;
      font-size: 24px;
      line-height: 60px;
      color: #d2e2e0;
    }

    .logo {
      width: 130px;
      height: 38px;
      margin-right: 20px;
    }

    .login-cover {
      width: 339px;
      height: 358px;
    }

    .login-card .card-body {
      display: flex;
    }

    .user-form {
      display: none;
      flex-grow: 1;
      margin-left: 52px;
    }
  </style>
</head>

<body>
  <div class="card login-card">
    <div class="card-header">
      <img class="logo" src="http://www.itcbc.com:8888/assets/images/logo2.png" alt="">
      学员管理系统
    </div>
    <div class="card-body">
      <img class="login-cover" src="http://www.itcbc.com:8888/assets/images/slogan.png" alt="封面">
      <!-- 表单 -->
      <form class="user-form d-block">
        <h4 class="mb-4">欢迎登录</h4>
        <div class="form-floating mb-3">
          <input class="form-control" id="floatingInput" placeholder="用户名">
          <label for="floatingInput">用户名</label>
          <div class="invalid-feedback">
            用户名长度不能小于2位或超过15位
          </div>
        </div>
        <div class="form-floating">
          <input type="password" class="form-control" id="floatingPassword" placeholder="密码">
          <label for="floatingPassword">密码</label>
          <div class="invalid-feedback">
            密码长度不能小于6位或超过15位
          </div>
        </div>
        <div class="d-grid gap-2">
          <button class="btn btn-primary mt-4" type="submit">登录</button>
          <button type="button" class="toggle-form btn btn-link text-start">还没有账号，去注册</button>
        </div>
      </form>

      <!-- 注册表单 -->
      <form class="user-form">
        <h4 class="mb-4">欢迎注册</h4>
        <div class="form-floating mb-3">
          <input class="form-control" id="floatingInput2" placeholder="用户名">
          <label for="floatingInput2">用户名</label>
          <div class="invalid-feedback">
            用户名长度不能小于2位或超过15位
          </div>
        </div>
        <div class="form-floating">
          <input type="password" class="form-control" id="floatingPassword2" placeholder="密码">
          <label for="floatingPassword2">密码</label>
          <div class="invalid-feedback">
            密码长度不能小于6位或超过15位
          </div>
        </div>
        <div class="d-grid gap-2">
          <button class="btn btn-primary mt-4" type="submit">注册</button>
          <button type="button" class="toggle-form btn btn-link text-start">已有账号，去登录</button>
        </div>
      </form>
    </div>
  </div>
  <script src="vendor/bootstrap.bundle.js"></script>
  <script src="vendor/axios.js"></script>
  <script src="vendor/jquery.js"></script>
  <script src="vendor/toastr.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/login.js"></script>
</body>

</html>